<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="registeration_page.css">
<script language="javascript" src="script/jquery-1.2.6.pack.js"></script> 
<script language="javascript" src="script/jquery.layoutengine.min.js"></script> 
<script language="javascript" src="script/jquery.jtabs.js"></script> 
<script language="javascript" src="script/jquery.haschange.js"></script> 
<script language="javascript" type="text/javascript"> </script>

<script>
$(document).ready(function(){
     var homepageurl="http://localhost/homepage.html";
    var loginurl="http://localhost/login.html";
    var registerationurl="http://localhost/registeration_page.html";
    var layoutSettings =
    {
        Name    :   "Main",
        Dock    :   $.layoutEngine.DOCK.FILL,
        EleID   :   "main",        
        Children:   [
                        {
                            Name    :   "Top",
                            Dock    :   $.layoutEngine.DOCK.TOP,
                            EleID   :   "top",                           
                            Height  :   $(document).height()/5.7	
                        },
                        {
                            Name    :   "Left",
                            Dock    :   $.layoutEngine.DOCK.LEFT,
                            EleID   :   "left",                          
                            Width   :   $(document).width()/8
                        },
                        {
                            Name    :   "Fill",
                            Dock    :   $.layoutEngine.DOCK.FILL,
                            EleID   :   "fill"
                        },
                        {
                            Name    :   "Right",
                            Dock    :   $.layoutEngine.DOCK.RIGHT,
                            EleID   :   "right",                           
                            Width   :   $(document).width()/8
                        },
                        {
                            Name    :   "Bottom",
                            Dock    :   $.layoutEngine.DOCK.BOTTOM,
                            EleID   :   "bottom",
                            Height  :   $(document).height()/16
                        }
                    ]
             
    };
    
    $.layoutEngine(layoutSettings);
    
    $("#registerbutton").click(function(){
		var firstname=$("#firstname").val();
		console.log("firstname:",firstname);
		
		var lastname=$("#lastname").val();
		console.log("lastname:",lastname);
		
		var phonenumber=$("#phonenumber").val();
		console.log("phonenumber:",phonenumber);
		
		var street=$("#street").val();
		console.log("street:",street);
		
		var city=$("#city").val();
		console.log("city:",city);
		
		var username=$("#username").val();
		console.log("username:",username);
		
		var userpass=$("#userpass").val();
		console.log("userpass:",userpass);
		
		var againuserpass=$("#againuserpass").val();
		console.log("againuserpass:",againuserpass);
		
		var email=$("#email").val();
		console.log("email:",email);
		
		

		var usertype=$("#userTypeRadioButton input[type='radio']:checked").val();
		console.log("usertype:",usertype);
		
		
		$.post("travIT.php",{"username":username,"userpass":userpass,"useremail":email,"usertype":usertype,"firstname":firstname,"lastname":lastname,"phonenumber":phonenumber,"address":street+city},function(response){


		//alert("resp:"+response);
			if(jQuery.trim(response)=="new"){
				alert("Welcome New User");
				var url=loginurl;
				window.location=url;

			}else{
			alert("This Username already exists");
			$("#username").val("");
			$("#username").css("background-color","Red");
			}
		});
});



$("#cancelbutton").click(function(){
var url=loginurl;
window.location=url;


});

});


</script> 
</head>
<body>
<div id="main"> 
	<div id="top" style="background-color:#333333"> 
		<img src="TrackImage" id="header"/>rack & <img src="ValidateImage" id="header"/>alidate IT
	</div> 
	<div id="left" style="background-color:#993300"> 

	</div> 
	<div id="fill" style="background-color:white"> 
	<form class="register">
		<h1><img src="registerationImage"/>Registration</h1>
		<fieldset class="row1">
			<legend>Account Details </legend>
			<p>
				<label>Choose username * </label>
				<input type="text" id="username">
				<label>Enter Password * </label>
				<input type="password" id="userpass">
			</p>
			<p>
				<label>Enter email* </label>
				<input type="text" id="email">
				<label>Repeat Password* </label>
				<input type="password" id="againuserpass">
			</p>
		</fieldset>
		
	<fieldset class="row2">
		<legend>Personal Details </legend>
		<p>
			<label>First Name * </label>
			<input class="long" type="text" id="firstname">
		</p>
		<p>
			<label>Last Name * </label>
			<input class="long" type="text" id="lastname">
		</p>
		<p>
			<label>Phone * </label>
			<input type="text" maxlength="10" id="phonenumber">
		</p>
		<p>
			<label class="optional">Street </label>
			<input class="long" type="text" id="street">
		</p>
		<p>
			<label>City * </label>
			<input class="long" type="text" id="city">
		</p>
		
	</fieldset>
	<fieldset class="row3">
		<legend>Further Information </legend>
		<p>
			<label>Gender *</label>
			<div id="userTypeRadioButton">
				<input type="radio" value="radio" name="userGender">Male<br><br>
				<input type="radio" value="radio" name="userGender">Female<br><br>
			</div>
		</p>
		<p>
			<label>User Type *</label>
			<div id="userTypeRadioButton">
				<input name="userType" type="radio" value="radio"/>User<br><br>
				<input name="userType" type="radio" value="radio"/>Vendor<br><br>	
				<input name="userType" type="radio" value="radio"/>Retail<br><br>
				<input name="userType" type="radio" value="radio"/>Distributor<br><br>
			</div>
		</p>
	</fieldset>
<input type="button" value="Register!" id="registerbutton" class ="button"/> <br><br>
<input type="button" value="Cancel!" id="cancelbutton" class="button" /> 
	</form>	
</div>	
	<div id="right" style="background-color:#9900CC"> 

	</div>
	<div id="bottom" style="background-color:#CCCCCC"> 
	<center>
	&copy
	<a href="#">Contact us </a>
	<a href="#">Help</a>
	<a href="#">About TravIT</a>
	</center>
	</div> 
	

</div> 
</body>
</html>
